<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <!-- 引入Element UI的CSS -->
    <link rel="stylesheet" href="/css/index.css">
    <!-- 引入Vue.js -->
    <script src="/js/vue.js"></script>
    <!-- 引入Element UI的JS -->
    <script src="/js/index.js"></script>
    <!-- 引入Axios -->
    <script src="/js/axios.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #6e8efb, #a777e3);
        }
        .register-container {
            width: 500px;
            padding: 40px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
        }
        .register-title {
            text-align: center;
            color: #303133;
            font-size: 28px;
            margin-bottom: 30px;
            font-weight: bold;
            letter-spacing: 2px;
        }
        .el-form-item {
            margin-bottom: 25px;
        }
        .el-form-item__label {
            font-weight: 600;
            color: #606266;
        }
        .form-buttons {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }
        .form-buttons .el-button {
            width: 45%;
        }
        .back-to-login {
            text-align: center;
            margin-top: 15px;
        }
        .back-to-login a {
            color: #6e8efb;
            text-decoration: none;
            font-size: 14px;
        }
        .back-to-login a:hover {
            color: #a777e3;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="register-container">
        <h3 class="register-title">用户注册</h3>
        <el-form :model="registerForm" :rules="rules" ref="registerForm" label-width="100px">
            <el-form-item label="用户名" prop="user_name">
                <el-input v-model="registerForm.user_name" placeholder="请输入用户名" prefix-icon="el-icon-user"></el-input>
            </el-form-item>
            
            <el-form-item label="真实姓名" prop="real_name">
                <el-input v-model="registerForm.real_name" placeholder="请输入真实姓名" prefix-icon="el-icon-user"></el-input>
            </el-form-item>
            
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="registerForm.password" placeholder="请输入密码" 
                         show-password prefix-icon="el-icon-lock"></el-input>
            </el-form-item>
            
            <el-form-item label="确认密码" prop="confirmPassword">
                <el-input type="password" v-model="registerForm.confirmPassword" placeholder="请再次输入密码" 
                         show-password prefix-icon="el-icon-lock"></el-input>
            </el-form-item>
            
            <el-form-item label="手机号码" prop="phonenumber">
                <el-input v-model="registerForm.phonenumber" placeholder="请输入手机号码" prefix-icon="el-icon-mobile-phone"></el-input>
            </el-form-item>
            
            <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="registerForm.sex">
                    <el-radio label="0">男</el-radio>
                    <el-radio label="1">女</el-radio>
                </el-radio-group>
            </el-form-item>
            
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="registerForm.email" placeholder="请输入邮箱地址" prefix-icon="el-icon-message"></el-input>
            </el-form-item>
            
            <div class="form-buttons">
                <el-button type="primary" @click="submitForm('registerForm')">立即注册</el-button>
                <el-button @click="resetForm('registerForm')">重置</el-button>
            </div>
        </el-form>
        <div class="back-to-login">
            <a href="/html/login.html">已有账号？返回登录</a>
        </div>
    </div>
</div>

<script>
new Vue({
    el: '#app',
    data() {
        // 自定义验证规则
        const validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.registerForm.confirmPassword !== '') {
                    this.$refs.registerForm.validateField('confirmPassword');
                }
                callback();
            }
        };
        const validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.registerForm.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        
        return {
            registerForm: {
                user_name: '',
                real_name: '',
                password: '',
                confirmPassword: '',
                phonenumber: '',
                sex: '0',  // 默认选择男性
                email: ''
            },
            rules: {
                user_name: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'blur' }
                ],
                real_name: [
                    { required: true, message: '请输入真实姓名', trigger: 'blur' },
                    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, validator: validatePass, trigger: 'blur' },
                    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
                ],
                confirmPassword: [
                    { required: true, validator: validatePass2, trigger: 'blur' }
                ],
                phonenumber: [
                    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
                ],
                email: [
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 构造要提交的数据对象
                    const submitData = {
                        user_name: this.registerForm.user_name,
                        real_name: this.registerForm.real_name,
                        password: this.registerForm.password,
                        phonenumber: this.registerForm.phonenumber,
                        sex: this.registerForm.sex,
                        email: this.registerForm.email
                    };
                    
                    axios.post('/user/register', submitData, {
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    })
                    .then(response => {
                        if (response.data.code === 200) {
                            this.$message.success('注册成功！');
                            // 注册成功后延迟1秒跳转到登录页
                            setTimeout(() => {
                                window.location.href = '/html/login.html';
                            }, 1000);
                        } else {
                            this.$message.error(response.data.msg || '注册失败，请重试');
                        }
                    })
                    .catch(error => {
                        console.error('注册请求出错:', error);
                        this.$message.error('注册失败，请稍后重试');
                    });
                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
});
</script>
</body>
</html> 